<template>
	<view :data-theme="theme" style="background: #fff;min-height: 100vh;">
		<mumu-get-qrcode @success='qrcodeSuccess' @error="qrcodeError" v-if="sao" style="width: 100vw;height: 100vh;"></mumu-get-qrcode>
		<view v-else>
			<view class="ticket-all">
				<view class="ticket-item" @click="changeType(1)" :class="type == 1?'typeOn':''">
					<image src="@/static/images/ticket.png" />
					<view class="ticket-item-num">
						<view class="ticket-item-num-name">博士水票</view>
						<view class="ticket-item-num-num">{{userInfo.buyWater}}张</view>
						<view class="ticket-item-num-btn">
							<view class="ticket-item-num-btn1" @click.shop="donationTicket(1)">
								转赠
							</view>
						</view>
					</view>
				</view>
				<view class="ticket-item" @click="changeType(2)"  :class="type == 2?'typeOn':''">
					<image src="@/static/images/ticket2.png" />
					<view class="ticket-item-num">
						<view class="ticket-item-num-name">赠送水票</view>
						<view class="ticket-item-num-num">{{userInfo.giftWater}}张</view>
						<view class="ticket-item-num-btn">
							<view class="ticket-item-num-btn2" @click.shop="donationTicket(3)">
								转存
							</view>
							<view class="ticket-item-num-btn1" @click.shop="donationTicket(2)">
								转赠
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='bill-details'>
				<view class="bill-details-name pad30">水票明细</view>
				<view class="bill-details-tab pad30">
					<view class='nav acea-row'>
						<view class='item' :class='addOrSub==="all" ? "on":""' @click='changeAddOrSub("all")'>全部</view>
						<view class='item' :class='addOrSub==="expenditure" ? "on":""' @click='changeAddOrSub("expenditure")'>收入</view>
						<view class='item' :class='addOrSub==="income" ? "on":""' @click='changeAddOrSub("income")'>支出</view>
					</view>
				</view>
				<view class='sign-record'>
					<view class='list pad30' v-for="(vo,indexn) in userBillList" :key="index">
						<view class='item'>
							<view class='listn borRadius14'>
								<view class='itemn2 acea-row row-between-wrapper'>
									<view class="image">
										<image src="@/static/images/ticket.png"></image>
									</view>
									<view style="flex: 1;">
										<view class="itemn2-name">
											<view>{{vo.type==1?'博士水票':'赠送水票'}}-{{vo.reasonType | reasonTypeStr}}</view>
											<view style="color: #FFB83E;" v-if="vo.value>0">+{{vo.value}}张</view>
											<view style="color: #fe5c2d;" v-else>{{vo.value}}张</view>
										</view>
										<view class="itemn2-type" v-if="vo.reasonType == 0">套餐规格：博士水票</view>
										<view class="itemn2-type" v-if="vo.reasonType == 1">赠送人：{{ vo.otherUid == 0?'平台':vo.otherNickname }}</view>
										<view class="itemn2-type" v-if="vo.reasonType == 2 || vo.reasonType == 8">授赠人：{{ vo.otherUid == 0?'平台':vo.otherNickname }}</view>
										<view class="itemn2-type" v-if="vo.reasonType == 3">取水设备：{{vo.storeName}}</view>
										<view class="itemn2-type" v-if="vo.reasonType == 7">存入拉新二维码</view>
										<view class="itemn2-type" v-if="vo.reasonType == 6">选择水站：{{vo.storeName}}</view>
										<view class="itemn2-type" v-if="vo.reasonType == 4">转存卡号：{{vo.orderId}}</view>
										<view class="itemn2-type" v-if="vo.reasonType == 11">支付退款</view>
										<view class="itemn2-order" v-if="vo.reasonType == 0">核销编号：{{vo.orderId}}</view>
										<view class="itemn2-order" v-else>数据编号：{{vo.id}}</view>
										<view class="itemn2-time" v-if="vo.reasonType == 0">购买时间：{{vo.createTime}}</view>
										<view class="itemn2-time" v-if="vo.reasonType == 1 || vo.reasonType == 2 || vo.reasonType == 8">赠送时间：{{vo.createTime}}</view>
										<view class="itemn2-time" v-if="vo.reasonType == 3">取水时间：{{vo.createTime}}</view>
										<view class="itemn2-time" v-if="vo.reasonType == 7">转存时间：{{vo.createTime}}</view>
										<view class="itemn2-time" v-if="vo.reasonType == 6">捐赠时间：{{vo.createTime}}</view>
										<view class="itemn2-time" v-if="vo.reasonType == 4">转存时间：{{vo.createTime}}</view>
										<view class="itemn2-time" v-if="vo.reasonType == 11">退款时间：{{vo.createTime}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper' v-if="userBillList.length>0">
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text><text style="color: #D8D8D8;" >{{loadTitle}}</text>
					</view>
					<view v-if="userBillList.length == 0">
						<emptyPage title="暂无水票的记录哦～"></emptyPage>
					</view>
				</view>
			</view>
			<div class="whiteBg" style="position: fixed;bottom: 60rpx;left: 30rpx;right: 30rpx;display: flex;align-items: center;">
				<div class="invitation-logo bg_color" @click="goScan">扫码出水</div>
				<image src="./la.png" class="whiteBg-img" mode="heightFix" @click="gola"></image>
			</div>
		</view>
		
	</view>
</template>

<script>
	import {
		getWaterList,
		getUserInfo,
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import emptyPage from '@/components/emptyPage.vue';
	import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'
	let app = getApp();
	export default {
		components: {
			emptyPage,mumuGetQrcode
		},
		filters: {
			reasonTypeStr(val) {
				return {
					'0': '购买',
					'1': '赠送',
					'2': '受赠',
					'3': '扫码出水',
					'8': '注册受赠',
					'7': '转存',
					'6': '捐赠',
					'4': '转存',
					'11': '退款',
				}[val]
			}
		},
		data() {
			return {
				sao: false,
				loadTitle: '加载更多',
				loading: false,
				loadend: false,
				page: 1,
				limit: 20,
				addOrSub: 'all',
				type: 1,
				userBillList: [],
				theme:app.globalData.theme,
			};
		},
		computed: mapGetters(['isLogin','userInfo']),
		onShow() {
			if (this.isLogin) {
				this.page = 1
				this.userBillList = []
				this.getUserWaterList();
			} else {
				toLogin();
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.addOrSub = options.addOrSub?options.addOrSub:'all';
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getUserWaterList();
		},
		methods: {
			qrcodeSuccess(data) {
				location.href = data
			},
			qrcodeError(err) {
				console.log(err)
				uni.showModal({
					title: '摄像头授权失败',
					content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
					success: () => {
						// uni.navigateBack({})
					}
				})
			},
			gola() {
				uni.navigateTo({
					url: '/pages/promoter/user_spread_code/acquisition'
				})
			},
			goScan() {
				// #ifdef H5
					this.sao = true
				// #endif
				// #ifndef H5
					uni.scanCode({
						onlyFromCamera: true,
						success: function (res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
				// #endif

				// uni.navigateTo({
				// 	url: '/pages/users/user_ticket/scan'
				// })
			},
			donationTicket(type) {
				if (type == 3) {
					uni.navigateTo({
						url: '/pages/users/user_ticket/save'
					})
				} else {
					uni.navigateTo({
						url: '/pages/users/user_ticket/donation?type='+type
					})
				}
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					uni.hideLoading();
					that.$store.commit("UPDATE_USERINFO", res.data);
					that.isStatus = true
					this.modelCancel();
				});
			},
			/**
			 * 获取账户明细
			 */
			getUserWaterList: function() {
				let that = this;
				if (that.loadend) return;

				if (that.loading) return;
				that.loading = true;
				that.loadTitle = "";
				let data = {
					page: that.page,
					limit: that.limit,
					addOrSub: {
						'all': '',
						'expenditure': 1,
						'income': 2,
					}[that.addOrSub],
					type: that.type
				}
				getWaterList(data).then(function(res) {
					let list = res.data.list ? res.data.list : [],
					loadend = res.data.totalPage <= that.page;
					if (that.page == 1) {
						that.userBillList = list
					} else {
						that.userBillList = that.userBillList.concat(list)
					}
					console.log(that.userBillList)
          that.$set(that, 'userBillList', that.userBillList);
					that.page += 1;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "我也是有底线的~" : "加载更多";
				}, function(res) {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},
			changeType(type) {
				this.type = type;
				this.addOrSub = 'all'
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'userBillList', []);
				this.getUserWaterList();
			},
			/**
			 * 切换导航
			 */
			changeAddOrSub: function(type) {
				this.addOrSub = type;
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'userBillList', []);
				this.getUserWaterList();
			},
		}
	}
</script>

<style scoped lang='scss'>
	.typeOn{
		border: 4rpx solid #191B36;
		transform: scale(1) !important;
	}
	.whiteBg-img{
		height: 120rpx;
		margin-left: 50rpx;
	}
	.itemn2{
		padding: 40rpx 0;
		border-bottom: 1rpx solid #D8D8D8;
	}
	.itemn2 .image{
		width: 174rpx;
		height: 184rpx;
		border-radius: 20px;
		display: flex;
		margin-right: 20rpx;
		image{
			width: 174rpx;
			height: 184rpx;
			display: block;
		}
	}
	.itemn2-name{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333333;
	}
	.itemn2-type{
		font-size: 24rpx;
		color: #666666;
		margin-top: 15rpx;
	}
	.itemn2-order{
		font-size: 24rpx;
		color: #666666;
		margin-top: 15rpx;
	}
	.itemn2-time{
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #666666;
	}
	.bill-details-tab{
		display: flex;
		justify-content: space-between;
		
	}
	.ticket-all{
		padding: 16rpx 30rpx 40rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.bill-details-name{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	.ticket-item{
		width: 335rpx;
		height: 210rpx;
		transform: scale(0.95);
		border-radius: 20rpx;
		position: relative;
		image{
			width: 100%;
			height: 100%;
			display: block;
			position: relative;
			z-index: 1;
		}
	}
	.ticket-item-num{
		position: absolute;
		top: 0;
		left: 0%;
		right: 0%;
		bottom: 0%;
		z-index: 2;
		display: flex;
		align-items: center;
		flex-direction:column;
		&-name{
			width: 120rpx;
			height: 40rpx;
			background: #191B36;
			border-radius: 0px 0px 10rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			color: #FFDEA5;
		}
		&-num{
			font-size: 36rpx;
			color: #FFFFFF;
			margin-top: 26rpx;
		}
		&-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 28rpx;
		}
		&-btn1{
			width: 127rpx;
			height: 40rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			border: 1px solid rgba(234,63,48,0.51);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #EA3F30;
		}
		&-btn2{
			width: 127rpx;
			margin-right: 21rpx;
			height: 40rpx;
			border-radius: 22rpx;
			border: 2rpx solid #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #fff;
		}
	}
	.sign-record {}

	.bill-details .nav {
		height: 75rpx;
		width: 350rpx;
		display: flex;
		justify-content: space-between;
	}
	.bill-details .nav .item {
		font-size: 28rpx;
		color: #333333;
		white-space: nowrap;
		text-align: center;
		
	}

	.bill-details .nav .item.on {
		position: relative;
		@include main_color(theme);
	}
	.on::after{
		content: '';
		bottom: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		position: absolute;
		width: 48rpx;
		height: 6rpx;
		border-radius: 3rpx;
		@include main_bg_color(theme);
	}
	.font_color{
		color: #E93323 !important;
	}
	.invitation-logo{
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 86rpx;
		background-color: $theme-color;
		border-radius: 120rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
</style>
